<template>
  <el-form
    :model="basicForm"
    :rules="basicRules"
    ref="basicForm"
    size="small"
    label-width="140px"
  >
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="服务商名称:" prop="serviceName">
          <el-input
            size="small"
            v-model="basicForm.serviceName"
            placeholder="请输入服务商名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务商类型:" prop="serviceType">
          <el-select
              class="width-100"
              size="small"
              v-model="basicForm.serviceType"
              placeholder="请选择服务商类型"
            >
              <el-option
                v-for="item in serviceTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系人名称:" prop="contactName">
          <el-input
            size="small"
            v-model="basicForm.contactName"
            placeholder="请输入联系人名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系人电话:" prop="contactNumber">
          <el-input
            size="small"
            maxlength="11"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            v-model="basicForm.contactNumber"
            placeholder="请输入联系人电话"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="联系人邮箱:" prop="email">
          <el-input
            size="small"
            type="email"
            v-model="basicForm.email"
            placeholder="请输入联系人邮箱"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="省份/地市/区县:" prop="provinceCityArea">
          <el-cascader
            class="width-100"
            v-if="isShow"
            v-model="basicForm.provinceCityArea"
            :options="provinceCityAreaOptions"
            :props="provinceCityAreaProps"
            placeholder="请选择省份/地市/区县"
            clearable
            filterable
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="经营地址" prop="address">
          <el-input
            size="small"
            type="textarea"
            v-model="basicForm.address"
            placeholder="请输入经营地址"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结算模式:" prop="settlementMode">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.settlementMode"
            :disabled="isSettlement"
            placeholder="请选择结算模式"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in settlementModeList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="合作状态:" prop="isCooperate">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.isCooperate"
            placeholder="请选择合作状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in isCooperateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <!-- <el-col :span="12">
        <el-form-item label="分润状态:" prop="profitState">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.profitState"
            placeholder="请选择分润状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in profitStateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同状态:" prop="cooperateState">
          <el-select
            class="width-100"
            size="small"
            v-model="basicForm.cooperateState"
            placeholder="请选择合同状态"
          >
            <el-option
              :label="item.dictValue"
              :value="item.dictKey"
              v-for="item in cooperateStateList"
              :key="item.dictKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="24">
        <el-form-item label="异常状态原因:" prop="exceptionMsg">
          <el-input
            size="small"
            type="textarea"
            v-model="basicForm.exceptionMsg"
            placeholder="请输入异常状态原因"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDictionary, getRegion } from "@/api/system/dict";
// import { uploadPublic } from "@/api/system/oss";

export default {
  props: {
    basicForm: Object,
  },
  data() {
    return {
      basicRules: {
        serviceName: [
          { required: true, message: "请输入服务商名称", trigger: "blur" },
        ],
        // serviceKind: [
        //   { required: true, message: "请选择服务商分类", trigger: "blur" },
        // ],
        serviceType: [
          { required: true, message: "请选择服务商类型", trigger: "blur" },
        ],
        contactName: [{ required: true, message: "请输入联系人名称", trigger: "blur" }],
        contactNumber: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        // provinceCityArea: [{ required: true, message: "请选择省份/地市/区县", trigger: "blur" }],
        // address: [
        //   { required: true, message: "请输入经营地址", trigger: "blur" },
        // ],
        isAuth: [
          { required: true, message: "请选择认证状态", trigger: "blur" },
        ],
        settlementMode: [
          { required: true, message: "请选择结算模式", trigger: "blur" },
        ],
        // isCooperate: [
        //   { required: true, message: "请选择合作状态", trigger: "blur" },
        // ],
        // profitState: [
        //   { required: true, message: "请选择分润状态", trigger: "blur" },
        // ],
        // cooperateState: [
        //   { required: true, message: "请选择合同状态", trigger: "blur" },
        // ],
        domain: [
          { required: true, message: "请输入域名地址", trigger: "blur" },
        ],
        // backgroundUrl: [
        //   { required: true, message: "请上传系统背景", trigger: "blur" },
        // ],
      },
      serviceKindList: [],
      serviceTypeList: [],
      provinceCityAreaOptions: [],
      provinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      isAuthList: [],
      settlementModeList: [],
      // isCooperateList: [],
      // profitStateList: [],
      // cooperateStateList: [],
      isShow: true,
      isSettlement: false,
      // isShowServiceType: false,
    };
  },
  computed: {},
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "service_type"}).then((res) => {
        this.serviceTypeList = res.data.data;
      });
      // getDictionary({code: "service_kind"}).then((res) => {
      //   this.serviceKindList = res.data.data;
      // });
      getDictionary({code: "settlement_mode"}).then((res) => {
        this.settlementModeList = res.data.data;
      });
      // getDictionary({code: "is_cooperate"}).then((res) => {
      //   this.isCooperateList = res.data.data;
      // });
      // getDictionary({code: "profit_state"}).then((res) => {
      //   this.profitStateList = res.data.data;
      // });
      // getDictionary({code: "cooperate_state"}).then((res) => {
      //   this.cooperateStateList = res.data.data;
      // });
    }
  },
};
</script>

<style lang="scss" scoped>
.width-100 {
  width: 100%;
}
</style>